<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <!-- 逆序输出 -->
        <!-- 'hel'->['h','e','l']->['l','e','h']->leh -->
        <!-- <div>
            {{msg}}
            计算属性:{{reverseMsg}}
            <p></p>
            {{now}}
        </div>
        <input type="text" v-model="msg"> -->

        <select v-model="gender">
            <option value="">全部</option>
            <option value="m">男</option>
            <option value="fm">女</option>
        </select>
        <ul>
            <li v-for="item in filterSex">{{item.name}}</li>
        </ul>


    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        var app = Vue.createApp({

            data: function () {
                return {
                    arr: [
                        { name: '周飘', sex: 'fm' },
                        { name: '志文', sex: 'm' },
                        { name: '雅芸', sex: 'fm' },
                        { name: '嘉远', sex: 'm' },
                    ],
                    msg: '1', //olleh
                    gender: ''
                }
            },
            methods: {
                /* Key() {
                    let str = event.target.value;
                    this.msg = str.split('').reverse().join("")
                } */
            },
            //计算属性一定要有返回值
            // 计算属性：数据劫持（创建阶段）
            computed: {
                reverseMsg() {
                    return this.msg.split('').reverse().join("");
                },
                filterSex() {
                    if (this.gender === '') return this.arr;
                    //gender不为空
                    // 返回值：符合条件的 数组
                    return this.arr.filter((stu) => this.gender === stu.sex);
                }

            },
            created() {
                console.log(this.reverseMsg)
            },
        }).mount('#div');
    </script>
</body>

</html>